<template>
	<view class="page">
		<u-form :border-bottom="false" :model="form" ref="uForm" class="form" label-position="top">
			<view class="title">个人信息</view>
			<u-form-item label="姓名" prop="name" required="true">
				<u-input v-model="form.name" />
			</u-form-item>

			<u-form-item label="手机号" prop="phone" required="true">

				<view class="phone">
					<view class="phoLab">+86</view>
					<u-input style="margin-left: 10rpx;" placeholder="请输入手机号" v-model="form.phone" />
				</view>
			</u-form-item>

			<u-form-item label="身份证号码" prop="IdCard" required="true">
				<u-input v-model="form.IdCard" />
			</u-form-item>

			<u-form-item label="性别" prop="sex" required="true">
				<u-input placeholder="请选择性别" v-model="form.sex" type="select" @click="shows" />
				<u-select v-model="show" mode="single-column" :list="sexList" @confirm="confirm"></u-select>
			</u-form-item>

			<view class="title">居住地址</view>
			<u-form-item label="省/市/区县/街道" prop="aftAddress" required="true">
				<u-input placeholder="请选择省/市/区县/街道" v-model="form.aftAddress" type="select" @click="showType" />
				<u-select v-model="showD" mode="mutil-column-auto" :list="list" @confirm="confirm2"></u-select>
			</u-form-item>
			<u-form-item label="详细地址" prop="detailAftAddress" required="true">
				<u-input v-model="form.detailAftAddress" placeholder="请输入详细地址" />
			</u-form-item>

			<view class="title">来黔前居住地址</view>
			<u-form-item label="省/市/区县/街道" prop="beAddress" required="true">
				<u-input placeholder="请选择来黔前居住地址" v-model="form.beAddress" type="select" @click="showType2" />
				<u-select v-model="showT2" mode="mutil-column-auto" :list="list" @confirm="confirm3"></u-select>
			</u-form-item>

			<u-form-item label="来黔前详细地址" prop="detailBeAddress" required="true">
				<u-input v-model="form.detailBeAddress" placeholder="请输入来黔前详细地址" />
			</u-form-item>

			<u-form-item label="来黔返黔目的" prop="objective" required="true">
				<u-input placeholder="请选择来黔返黔目的" v-model="form.objective" type="select" @click="showType3" />
				<u-select v-model="showT3" mode="single-column" :list="forD" @confirm="confirm4"></u-select>
			</u-form-item>

			<view class="title">健康状况</view>
			<view class="message">前30天内本人有无如下情况</view>

			<u-checkbox-group wrap="true" class="group" v-for="(item, index) in checkboxList" :key="index">
				<u-checkbox @change="checkboxGroupChange" :name="item.value" v-model="item.checked"
					:data-id="item.value">
					{{ item.name }}
				</u-checkbox>
			</u-checkbox-group>

			<u-form-item v-if="checkboxList[1].checked==true" label="具体地址" prop="travelAddress" required="true">
				<u-input v-model="form.travelAddress" placeholder="请输入具地址" />
			</u-form-item>

			<u-form-item v-if="checkboxList[3].checked==true" label="检测时间" prop="sex">
				<u-input placeholder="请选择检测时间" v-model="form.dates" type="select" @click="picker" />
			</u-form-item>
			<u-picker mode="time" v-model="showPicker" :params="params" @confirm="timeConfirm"></u-picker>

			<u-form-item label="其他需申报的情况" prop="condition">
				<u-input v-model="form.condition" placeholder="请输入其他需申报的情况" />
			</u-form-item>

			<view class="promise" @change="checkboxChange2">
				<u-form-item :border-bottom="false">
					<u-checkbox-group wrap="true">
						<u-checkbox v-model="checkBt.checked" prop="checked">
							{{ checkBt.name }}
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</view>

			<view @click="submit" style="margin-top: 40rpx;" :class="{'btn':checkBt.checked,'btn2':!checkBt.checked}">提交
			</view>
		</u-form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showD: false,
				showT2: false,
				showT3: false,
				checkId: '',
				showPicker: false,
				form: {
					name: '', //姓名
					phone: '', //电话
					sex: '', //性别
					IdCard: '', //身份证 
					beAddress: '', //来黔前地址
					detailBeAddress: '', //来黔前详细地址
					aftAddress: '', //现居住地址
					detailAftAddress: '', //现居住详细地址	
					objective: '', //目的
					travelAddress: '', //旅游地址
					dates: '', //检测时间
					condition: '',
					Msg: ''
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				sexList: [{
						value: 1,
						label: '男'
					},
					{
						value: 2,
						label: '女'
					}
				],
				list: [{
						value: 1,
						label: '中国',
						children: [{
								value: 2,
								label: '广东',
								children: [{
										value: 3,
										label: '深圳'
									},
									{
										value: 4,
										label: '广州'
									}
								]
							},
							{
								value: 5,
								label: '广西',
								children: [{
										value: 6,
										label: '南宁'
									},
									{
										value: 7,
										label: '桂林'
									}
								]
							}
						]
					},
					{
						value: 8,
						label: '美国',
						children: [{
							value: 9,
							label: '纽约',
							children: [{
								value: 10,
								label: '皇后街区'
							}]
						}]
					}
				],
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							//可以单个或者同时写两个验证方式
							trigger: ['blur']
						},
						{
							min: 6,
							max: 12,
							message: '长度必须在6-12位之间',
							//可以单个或者同时写两个验证方式
							trigger: ['blur']
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							//可以单个或者同时写两个验证方式
							trigger: ['blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					IdCard: [{
							required: true,
							message: '请输入身份证号',
							//可以单个或者同时写两个验证方式
							trigger: ['blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.idCard(value)
							},
							message: '身份证格不正确式',
							trigger: ['blur']
						}
					],
					detailAftAddress: [{
						required: true,
						message: '请输入详细地址',
						//可以单个或者同时写两个验证方式
						trigger: ['blur']
					}],
					detailBeAddress: [{
						required: true,
						message: '请输入来黔前详细地址',
						//可以单个或者同时写两个验证方式
						trigger: ['blur']
					}],
					travelAddress: [{
						required: true,
						message: '请输入具体地址',
						//可以单个或者同时写两个验证方式
						trigger: ['blur']
					}],
					checked: [{
						boolean: true,
						message: '请勾选同意协议',
						trigger: ['blur']
					}]
				},
				checkboxList: [{
						value: 1,
						name: '密切接触史（与确证病例、无症状感染者、核酸检测阳性者有密切接触）',
						checked: false,
						disabled: false
					},
					{
						value: 2,
						name: '中高风险地区旅居史',
						checked: false,
						disabled: false
					},
					{
						value: 3,
						name: '境外旅居史',
						checked: false,
						disabled: false
					},
					{
						value: 4,
						name: '核算检测证明',
						checked: false,
						disabled: false
					}
				],
				checkBt: {
					value: 1,
					name: '本人承诺以上内容属实如隐瞒、虚报、谎报、本人承担一切法律责任和相应后果',
					checked: false,
					disabled: false
				},
				index: '',
				city: ['贵州省'],
				date: '',

				values: '',
				forD: [{
						value: 1,
						label: '务工回乡'
					},
					{
						value: 2,
						label: '在外就读返家'
					},
					{
						value: 3,
						label: '商务往来'
					},
					{
						value: 4,
						label: '旅游'
					},
					{
						value: 5,
						label: '探亲'
					},
					{
						value: 5,
						label: '其他'
					}
				],
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			shows: function(e) {
				this.show = true
			},
			showType: function() {
				this.showD = true
			},
			showType2: function() {
				this.showT2 = true
			},
			showType3: function() {
				this.showT3 = true
			},
			confirm: function(res) {
				this.form.sex = res[0].label
				console.log(res)
			},
			confirm2: function(res) {
				this.form.aftAddress = res[0].label + '-' + res[1].label + '-' + res[2].label
			},
			confirm3: function(res) {
				this.form.beAddress = res[0].label + '-' + res[1].label + '-' + res[2].label
			},
			confirm4: function(res) {
				this.form.objective = res[0].label
			},
			checkboxGroupChange: function(res) {
				this.checkId = res.name
				console.log(this.checkId)
			},
			picker: function() {
				this.showPicker = true
			},
			timeConfirm: function(res) {
				this.form.dates = res.year + '-' + res.month + '-' + res.day
				console.log(res)
			}
		},
		computed: {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.page {
		padding-bottom: 50rpx;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.promise {
		margin-top: 40rpx;
	}

	.form {

		width: 90%;
		height: 90%;
	}

	.title {
		margin-top: 20rpx;
		font-size: 45rpx;
	}

	.phone {
		margin-top: 10rpx;
		display: flex;
		color: #C8C7CC;
		font-size: 35rpx;

		.inp {
			width: 90%;
			margin-left: 5%;
		}
	}

	.phoLab {
		color: black;
		padding-right: 20rpx;
		border-right: 1rpx solid #C8C7CC;
	}

	.btn {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5rpx;
		background: #2979FF;
		color: white;
	}

	.btn2 {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5rpx;
		background: #A0CFFF;
		color: white;
	}

	.group {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
	}
</style>
